
import { useEffect, useState } from "react";
import { Form, Button } from "antd";
import { API } from '@request/api';
import { FormItemInput, FormItemSelect } from "@/components/antd/form/index";
import Table, { TableColumn } from "@/components/antd/table/Table";
import { useNavigate } from "react-router-dom";
import { StaffQueryDto } from "@/definition/dto/StaffDto";
import { StaffStatus ,StaffRole} from "@enum/StaffEnum";
import { StaffVo } from "@/definition/vo/StaffVo";
import { WidgetPaginatinProps } from "@/components/widget";
import WidgetPaginatin, { InitPagition } from "@/components/widget/WidgetPagination";
const coulum: TableColumn[] = [
    {
        key: "avatar",
        title: "头像",
        type: "IMG"
    },
    {
        key: "username",
        title: "账号",
        type: "TEXT"
    },
    {
        key: "nickname",
        title: "昵称",
        type: "TEXT"
    },
    {
        key: "role",
        title: "角色",
        type: "STATUS",
        value:StaffRole,
    },
    {
        key: "status",
        title: "状态",
        type: "STATUS",
        value:StaffStatus
    },
    {
        key: "",
        title: "操作",
        type: "ACTION"
    }
]
const StaffItems = () => {
    const onHandlerAdd = () => {}
    const [form] = Form.useForm<StaffQueryDto>();
    const [itmes,setItems] = useState<StaffVo[]>([]);
    const [total,setTotal] = useState<number>(0);
    const [pagition, setPagition] = useState<WidgetPaginatinProps>
    (
        InitPagition(() => (page: number, size: number) => setPagition({ ...pagition, page, size }))
    );
    const getStaffItems = async() =>{
            try{
              const {total,items} = await API.queryStaffItems(Object.assign(form.getFieldsValue(),{...pagition}));
              setItems(items);
              setTotal(total);
            }catch{

            }
    }
    useEffect(() => {
        form.setFieldsValue({ username: "", status: "" });
        getStaffItems();
    }, [])
    return (
        <>
            <Button onClick={onHandlerAdd}>添加员工</Button>
            <Form form={form} layout="inline">
                <FormItemInput name="username" label="账号" />
                <FormItemSelect name="status" label="状态" options={StaffStatus} />
            </Form>
            <Table items={itmes} column={coulum} onDelete={getStaffItems} api="deleteStaffItem"/>
            <WidgetPaginatin {...pagition} total={total}/>
        </>
    )
}
export default StaffItems;